<template>
  <div id="chart"></div>
</template>

<script>
import {Graph} from '@antv/x6'
import insertCss from 'insert-css';

insertCss(`
  .my-btn{
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    overflow: hidden;
    transition: .3s;
    margin-top: 40px;
    letter-spacing: 3px
  }

  .my-btn:hover {
    background: #03e9f4;
    border-radius: 5px;
    box-shadow: 0 0 5px #03e9f4,
                0 0 25px #03e9f4,
                0 0 50px #03e9f4,
                0 0 100px #03e9f4;
  }
`)

export default {
  name: 'customNode',
  methods: {
    createGraph() {
      this.registerNode();
      const graph = new Graph({
        container: document.getElementById('chart'),
        width: window.innerWidth,
        height: window.innerHeight,
        grid: true
      })
      graph.addNode({
        x: 100,
        y: 60,
        shape: 'custom-node',
      })

      graph.addNode({
        x: 200,
        y: 200,
        width: 100,
        height: 100,
        attrs: {
          eye: {
            fill: 'red'
          },
          eye1: {
            fill: 'pink',
            stroke: 'orange',
            strokeWidth: 5
          }
        },
        markup: [
          {
            tagName: 'path',
            selector: 'eye1',
            groupSelector: 'eye',
            attrs: {
              d:
                'M24.82,48.678c5.422,0,9.832-6.644,9.832-14.811c0-8.165-4.41-14.809-9.832-14.809s-9.833,6.644-9.833,14.809C14.987,42.034,19.399,48.678,24.82,48.678z',
            },
          },
          {
            tagName: 'path',
            selector: 'eye2',
            groupSelector: 'eye',
            attrs: {
              d:
                'M71.606,48.678c5.422,0,9.833-6.644,9.833-14.811c0-8.165-4.411-14.809-9.833-14.809c-5.421,0-9.831,6.644-9.831,14.809C61.775,42.034,66.186,48.678,71.606,48.678z',
            },
          },
        ]
      })
    
      graph.addNode({
        shape: 'html',
        x: 400, y: 300,
        width: 120, height: 50,
        html: () => {
          const wrap = document.createElement('div')
          wrap.style.width = '100%'
          wrap.style.height = '100%'
          wrap.style.display = 'flex'
          wrap.style.alignItems = 'center'
          wrap.style.justifyContent = 'center'
          wrap.style.border = '2px solid #9254de'
          wrap.style.background = '#efdbff'
          wrap.style.borderRadius = '4px'
          wrap.className= 'my-btn'
          wrap.innerText = 'shape is html'
          return wrap
        }
      })
      
    },
    registerNode() {
      Graph.registerNode('custom-node', {
        width: 200,
        height: 60,
        attrs: {
          body: {
            fill: 'orange',
            stroke: 'red'
          },
          title: {
            text: 'abc'
          },
          text: {
            text: 'this is content text',
            refX: 40,
            refY: 38,
            fontSize: 12,
            fill: 'rgba(0,0,0,0.6)',
            'text-anchor': 'start',
          },
        },
        markup: [
          {
            tagName: 'rect',
            selector: 'body',
          },
          {
            tagName: 'image',
            selector: 'image',
          },
          {
            tagName: 'text',
            selector: 'title',
          },
          {
            tagName: 'text',
            selector: 'text',
          },
        ],
      })
    }
  },
  mounted() {
    this.createGraph()
  }

}
</script>
